import React from 'react';
import assion from '@a/images/beike/assion_03.jpg'
import { ListDiv } from './assionStyled'
import { useHistory } from 'react-router-dom'
import PropType from 'prop-types'

const Assionlist = (props) => {
    console.log(props);
    let history = useHistory()
    let { models } = props.data
    return (
        <ListDiv>
            <div className='bgColor'></div>
            <div className='cont'>
                <header>
                    <div className='header-left'>
                        <div>
                            <img src={assion} alt="" />
                        </div>
                        <div>
                            <p>人教（编辑部）一年级下</p>
                            <p>
                                <span>第一单元</span>
                                <span>识字</span>
                                <span>已选1个课时</span>
                            </p>
                        </div>
                    </div>
                    <i className='yo-ico' onClick={ ()=>history.push('/check')} >&#xe67a;</i>
                </header>
                <ul>
                    {
                        props.data && models.map(v => {
                            return (
                                <li key={v.mkId} onClick={() => history.push('/readmodel')} >
                                    <div>
                                        <h2>{v.title} {v.icon &&<span>{v.icon}</span>}</h2>
                                        <p>{v.descible}</p>
                                    </div>
                                    <div>
                                        <img src={'http://10.9.63.223:8080' +  v.img} alt="" />
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        </ListDiv>
    );
}

Assionlist.prototype={
    data:PropType.object
}

export default Assionlist;